<template name="indproitem">
	<view>
		<view class="ind-items" @click="navToDetailPage">
			<image class="" :src="tempiteminfo.image" mode="aspectFill"></image>
			<view class="title">{{tempiteminfo.name}}</view>
			<view class="price">
				<text>¥{{tempUserType==0?tempiteminfo.price:tempiteminfo.agentPrice}}</text>
				<image @tap.stop="addCart" class="icon-cart" src="../static/index/cart.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "indproitem",
		data() {
			return {
				tempiteminfo: this.info,
				tempUserType: this.usertype,
			}
		},
		props: {
			info: Object,
			usertype: String
		},

		methods: {
			//-----------------------------------点击-------------------------------
			/**
			 * 详情跳转
			 */
			navToDetailPage() {
				let id = this.tempInfo.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			//加入购物车
			addCart: function() {
				let than = this;
				if (uni.getStorageSync('userInfo')) {
					than.$api.addCartF(this.tempiteminfo.id, 1, uni.getStorageSync('userInfo').userCode);
				} else {
					than.$api.msg('请先登陆');
				}
			},
		},
		watch: {
			usertype: function(newQuestion, oldQuestion) {
				this.tempUserType = newQuestion;
			}
		}
	}
</script>

<style lang="scss">
	.ind-items {
		width: 45.5vw;
		margin: 10rpx 1.5vw;
		background-color: #fff;
		padding: 20rpx;
		float: left;
		border-radius: 20rpx;

		image {
			width: calc(45.5vw - 40rpx);
			height: calc(45.5vw - 40rpx);
		}

		.title {
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			font-size: 28rpx;
			color: #303133;
			margin: 8rpx 0 16rpx;
		}

		.price {
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			height: 50rpx;
			line-height: 50rpx;

			text {
				color: #FA436A;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>
